<script>
import { useCounterStore } from "../stores/counter"
import { mapState, mapActions } from 'pinia'
export default {
    data() {
        return {
            list: [
                {
                    path: '/home',
                    name: 'home',
                    label: '主页',
                    icon: 'ri-home-smile-fill'
                },
                {
                    path: '/user',
                    name: 'user',
                    label: '用户管理',
                    icon: 'ri-user-fill'
                },
                {
                    path: '/mapShow',
                    name: 'page1',
                    label: '地图展示',
                    icon: 'ri-earth-fill'
                },
                {
                    label: '其他',
                    path: '/others',
                    children: [

                        {
                            path: '/page2',
                            name: 'page2',
                            label: '页面2',
                            icon: 'ri-user-fill'
                        },
                        {
                            path: '/page3',
                            name: 'page3',
                            label: '页面3',
                            icon: 'ri-user-fill'
                        },
                    ]
                },
            ],

        }

    },

    computed: {
        hasChindren() {
            return this.list.filter((item) => item.children)
        },

        noChindren() {
            return this.list.filter((item) => !item.children)
        },

        ...mapState(useCounterStore, ['isCollapse'])
    },

    methods: {
        menuRouter(item) {
            this.$router.push(item.path)
        }
    }
}

</script>
<template>
    <el-aside :width="isCollapse ? width = '64px' : width = '200px'">
        <el-menu default-active="/page1" class="el-menu-vertical-demo" :collapse="isCollapse">
            <el-menu-item :index="item.path" v-for="item in noChindren" @click="menuRouter(item)">
                <i :class="item.icon" id="single"></i>
                <span>{{ item.label }}</span>
            </el-menu-item>

            <el-sub-menu index="1" v-for="item in hasChindren">
                <template #title>
                    <i class="ri-arrow-up-circle-fill"></i>
                    <span>{{ item.label }}</span>
                </template>

                <el-menu-item-group>
                    <el-menu-item :index="item.path" v-for="item in item.children" @click="menuRouter(item)">
                        <i :class="item.icon" id="double"></i>
                        {{ item.label }}
                    </el-menu-item>
                </el-menu-item-group>

            </el-sub-menu>

        </el-menu>
    </el-aside>
</template>

<style scoped>
.ri-arrow-up-circle-fill {
    margin-right: 15px;
}

.el-menu-vertical-demo {
    height: 100%;
}

#single {
    margin-right: 15px;
}

#double {
    margin-right: 8px;
}
</style>